<template >
    <div class="container" >
        <div>
            <div>
                <span style="font-size: 20px;margin-top: 30px;">扫描二维码登录</span>
                <span  class="conta-qrocde" @mouseenter="mouseEnter" @mouseleave="data.isShowCourse = false">
                    <Transition name="qrcodeShow">
                        <span id="qrocde" v-show="!data.isShowCourse" >
                            <div  ref="qrcode"></div>
                            <template v-if="data.isOverTime">
                                <div @click="againGetQrCode">
                                    <span><el-icon :size="40"><RefreshRight v-if="!isQrcode"/><Check v-if="isQrcode"/></el-icon></span>
                                    <span v-html="data.wrrUser"></span>
                                </div>
                            </template>
                        </span>
                    </Transition>
                    <Transition name="qrcodeShow">
                        <span class="qrocdeBefore" v-show="data.isShowCourse"></span>
                    </Transition>
                </span>
                <span>请使用<span>xxxl客户端</span><br/>扫描登录或扫描下载app</span>
            </div>
            <div>
                <span style="font-size: 20px;margin-top: 30px;">密码登录&emsp;&emsp;|&emsp;&emsp;短信登录</span>
                <span class="conta-form">
                    <el-row style="width: 100%;height: 50px;">
                        <span style="width: 70px;">账号</span>
                        <input  placeholder="请输入账号"/>
                    </el-row>   
                    <el-row style="width: 100%;height: 50px;border-top: 1px solid rgb(206, 214, 224,0.9);">
                        <span style="width: 70px;">密码</span>
                        <input placeholder="请输入密码"/>
                    </el-row> 
                </span>
                <span class="conta-btn">
                    <el-button style="width: 50%;height: 100%;border-radius: 10px;">注册</el-button>
                    <el-button type="primary" style="width: 50%;height: 100%;border-radius: 10px;">登录</el-button>
                </span>
                <span style="color:rgb(206, 214, 224);margin-top: 20px;">其他方式登录</span>
                <span class="otherLoginFun">
                    <span><img src="../assets/wx.png"/>微信登录</span>
                    <span><img src="../assets/wb.png"/>微博登录</span>
                    <span><img src="../assets/QQ.png"/>QQ登录</span>
                </span>
            </div>
            <div @click="closePopup"><el-icon size="30"><Close /></el-icon></div>
            <div>未注册过xxl的手机号,我们将自动帮你注册账号<br/>登录或完成注册即代表你同意<span>用户协议</span>和<span>隐私政策</span><br/>PS:目前只完成了用户扫码登录,表单登录流程未完成</div>
        </div>
       
    </div>
</template>

<script>
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import QRCode from 'qrcodejs2-fix';
import {ref,onMounted,getCurrentInstance,reactive,computed,onBeforeMount,inject } from 'vue'
import { buvid } from '@/configs/dropLoadViode.js'
export default {
    name:'login-popup',
    setup(){
        const store = useStore();
        const popup = ref();
        const qrcode = ref();
        const {proxy} = getCurrentInstance()
        const router = useRouter()
        const isLogined = inject('isLogined')
        const data = reactive({
            isShowCourse:false,
            isOverTime:false,
            wrrUser:"二维码已过期<br/>请点击刷新"
        })
        let loginInfo = null;
        onBeforeMount(()=>{
           getLoginInfo();
        })
        onMounted(()=>{
           creatQrCode();
        })
        //关闭登录
        function closePopup(){
            store.commit('setIsShowLoginPopup',false)
        }
        function creatQrCode() {
            let timer = setTimeout(()=>{
                if(loginInfo != null){
                    new QRCode(qrcode.value, {
                        text: loginInfo.url, //二维码内容字符串
                        width: 168,
                        height: 163,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H,
                    })
                    clearQrCode();
                    clearTimeout(timer)
                }
            },500)
        }
        //得到请求登录信息 包括请求二维码内容的地址
        function getLoginInfo(){
            proxy.$axios({
                method:'GET',
                url:'/x/passport-login/web/qrcode/generate?source=main-fe-header',
                baseURL:'/biliProt'
            }).then(res=>{
                loginInfo = res.data.data
            })
        }
        //倒计时清除二维码时效 并且在期间不断请求后台扫描信息
        function clearQrCode(){
            let i = 0;
            let timer = setInterval(()=>{
                proxy.$axios({
                    method:"get",
                    url:'/x/passport-login/web/qrcode/poll?qrcode_key='+loginInfo.qrcode_key+'&source=main-fe-header',
                    baseURL:'/biliProt'
                }).then(res=>{
                    if(res.data.data.code == 0){
                        //以下注释代码为保存用户登录后的信息  不知何用 暂保存
                        //store.commit('setUserInfo',{refresh_token:res.data.data.refresh_token,timestamp:res.data.data.timestamp})
                        initLoginedData(res.data.data.url);
                        clearInterval(timer);
                    }
                    if(res.data.data.code == 86090 ){
                        data.isOverTime = true;
                        data.wrrUser = "扫码成功<br/>请在手机上确认";
                    }    
                })
                if(i >= 10){
                    data.isOverTime = true;
                    clearInterval(timer);
                }
                i++;
            },2000)
        }
        //初始化登录信息 设置cookie
        function initLoginedData(val){
            let cookies = val.slice(val.indexOf('?')+1).split('&');
            let Expires = null;
            let cookiesArr = cookies.filter(el=>{
                if(el.includes('Expires')){
                    Expires = el.slice(el.indexOf('=')+1);
                    return false 
                }else if(el.includes('gourl')){
                    return false
                }else{
                    return true
                }
            })
            cookiesArr.push('buvid3=' + buvid)      //这条代码是写死的 可能有更好的地方 这是取决于是否能展示搜索框模糊数据
            cookiesArr.forEach(el => {
                //let arr = el.split("=")
                document.cookie =el + ";expires="+new Date(Expires*1000)
            });
            
            //router.go(0);   //有闪烁  效果不太好
            isLogined();
            closePopup();
        }
        function mouseEnter(){
            if(!data.isOverTime) data.isShowCourse = true
        }
        const isQrcode = computed(()=>{
            return data.wrrUser.includes("扫码成功<br/>请在手机上确认")
        })
        //重新加载二维码
        function againGetQrCode(){
            data.isOverTime = false;
            qrcode.value.innerHTML = '';
            loginInfo = null;
            getLoginInfo();
            creatQrCode();
        }
        return{
            store,
            closePopup,
            popup,
            qrcode,
            data,
            mouseEnter,
            againGetQrCode,
            isQrcode
        }
    }

}
</script>

<style lang="scss" scoped>
.container{
    min-width: 1600px;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0,0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &>div{
        padding: 20px;
        box-sizing: border-box;
        width: 60%;
        height: 60%;
        background-color: white;
        border-radius: 10px;
        background-image: url("../assets/22_open.4ea5f239.png"),url("../assets//33_open.f7d7f655.png");
        background-position: bottom left,bottom right;
        background-repeat: no-repeat;
        background-size: 15%;
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    &>div div:nth-child(1){ 
        width: 46%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    &>div div:nth-child(2){ 
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    &>div div:nth-child(3){
        width: 34px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        transition: all .3s;
    }
    &>div div:nth-child(3):hover{
        background-color: rgb(206, 214, 224,0.6);
        cursor:pointer
    }
    &>div div:nth-child(4){
        position: absolute;
        bottom: 20px;
        width: 100%;
        font-size: 15px;
        color: rgb(0, 0, 0,0.7);
    }
    &>div div:nth-child(4) span{
        color: #409EFF;
    }
}
.conta-qrocde{
    position: relative;
    margin-top:15px;
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    &~span{
        margin: 25px;
        width: 180px;
    }
    &~span span{
        color: #409EFF;
        margin: 0 5px;
    }
}
#qrocde{
    position: relative;
    margin-top:15px;
    width: 180px;
    height: 175px;
    border: 1px solid rgb(206, 214, 224,0.9);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .5s;
    & div:nth-child(2){
        position: absolute;
        width: 180px;
        height: 175px;
        left: 0;
        float: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgb(255, 255, 255,0.9);
    }
    & div:nth-child(2) span:nth-child(1){
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        border-radius: 50%;
        color: #409EFF;
        margin-bottom: 10px;
    }
}
.qrocdeBefore{
    width: 350px;
    height: 175px;
    background-image: url("../assets/qr-tips.74063ae1.png");
    background-size: 100%;
    transition: all .5s;
    float: left;
    position: absolute;
}
.conta-form{
    width: 100%;
    height: 100px;
    margin-top: 20px;
    border: 1px solid rgb(206, 214, 224,0.9);
    border-radius: 10px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    
}
.el-row{
    display: flex;
    justify-content: center;
    align-items: center;
}
input{
    width: 80%;
    height: 45px;
    border: none;
    outline:none;
    font-size: 16px;
}
.conta-btn{
    margin-top: 18px;
    width: 100%;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.qrcodeShow-enter-active,
.qrcodeShow-leave-active {
  transition: all .3s;
}
.qrcodeShow-enter-from,
.qrcodeShow-leave-to {
    transform: translateY(15px);
    opacity: 0;
}
img{
    width: 30px;
    height: 30px;
}
.otherLoginFun{
    margin-top: 15px;
    display: flex;
    width: 79%;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    & span{
        display: flex;
        width: 27%;
        justify-content: space-around;
        align-items: center;
        color: rgb(0, 0, 0,0.5);
    }
}
</style>